<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>咨询室</title>
    <link rel="icon" href="${pageContext.request.contextPath}/static/img/favicon.ico"  type="image/x-icon" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/socket/sockjs.js"></script>
</head>
<style>
    .div1{
        float: left;
        height: 300px;
        background: #fff;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
</style>
<body>
<jsp:include page="page.jsp"></jsp:include>
<div class="am-cf admin-main">

<input id="name" value="${user.username}" type="hidden">
    <!-- content start -->
    <input id="xiTongGongGao" style="border: none;outline: medium">
    <div class="admin-content">
        <div class="" style="width: 80%;float:left;">
            <!-- 聊天区 -->
            <div class="am-scrollable-vertical" id="chat-view" style="height: 510px;">
                <ul class="am-comments-list am-comments-list-flip" id="chat">
                </ul>
            </div>
            <!-- 输入区 -->
            <button type="button" class="btn btn-info" id="clearchat">清空聊天</button>
            <button type="button" class="btn btn-primary" onclick="sendMessage()">发送信息</button>
            <div class="am-form-group am-form">
                <textarea class="" id="message" name="message" rows="5"  placeholder="这里输入你想发送的信息..."></textarea>
            </div>
        </div>
        <!-- 列表区 -->
        <div class="am-panel am-panel-default" style="float:right;width: 20%;">
            <div class="am-panel-hd">
                <h3 class="am-panel-title">在线 [<span id="onlinenum"></span>]</h3>
            </div>
            <ul class="am-list am-list-static am-list-striped" id="list">
            </ul>
            <div  class="div1" style="width:260px;height:250px">
                <ul class="am-list am-list-static am-list-striped" >
                   <li><a href="#">预约快速入口</a> </li>
                    <li><a href="http://chisc.net/CIOjulebu/wsbmwj/2019-08-05/3612.html">厦门预约挂号统一平台</a></li>
                    <li><a href="http://1075772.1024sj.com/">厦门中医院官网</a></li>
                    <li><a href="/user/index">返回首页</a></li>
                    <li><a href="/user/logout">退出登录</a> </li>

                </ul>
            </div>
        </div>
    </div>
    <!-- content end -->
</div>

<script >

    var wsServer = null;
    var ws = null;
    wsServer = "ws://" + location.host+"${pageContext.request.contextPath}" + "/chatServer";
    ws = new WebSocket(wsServer); //创建WebSocket对象
    ws.onopen = function (evt) {
        layer.msg('欢迎来到咨询室');
    };
    ws.onmessage = function (evt) {
        analysisMessage(evt.data);  //解析后台传回的消息,并予以展示
    };
    ws.onerror = function (evt) {
        layer.msg("连接异常");
    };
    ws.onclose = function (evt) {
        layer.msg("连接中断");
    };
      //发送消息
    function sendMessage(){
        if(ws == null){
            layer.msg('连接未开启');
            return;
        }
        var message = $("#message").val();
        if(message == null || message == ""){
            layer.msg('输入为空');
            return;
        }
        var from=$("#name").val();
        var data={"message":message,"type":"message","list":null,"from":from};
        //发送到后台方法
        ws.send(JSON.stringify(data));
    }
   //接受消息
    function analysisMessage(message){
        message = JSON.parse(message);
       //在线列表
        if(message.type == "message"){
            showChat(message.message,message.from,message.user);

        }
        if(message.type == "notice"){       //提示消息
            showNotice(message.message,message.list);

        }

        if(message.type == "noonline"){
            //客服不在线
            $("#message").val("");
            layer.msg(message.message);

        }
        if(message.type == "nobody"){
            $("#message").val("");
            //客户对象不在线
            layer.msg(message.message);
        }


    }

    function showNotice(notice,list){
        if(list!=null&&list!=undefined){
        $("#list").html("");    //清空在线列表
        $.each(list, function(index, item){
            var li = "<li>"+(index+1)+"_"+item.roleid.rolename+"__"+item.username+" <button type=\"button\" class=\"am-btn am-btn-xs am-btn-primary am-round\" ></button></li>";
            $("#list").append(li);
        });
        $("#onlinenum").text($("#list li").length); }    //获取在线人数
        $("#chat").append("<div><p class=\"am-text-success\" style=\"text-align:center\"><span class=\"am-icon-bell\"></span> "+notice+"</p></div>");
        $("#chat-view").scrollTop(chat[0].scrollHeight);   //让聊天区始终滚动到最下面
    }

    function showChat(message,from,user){
        var isSef = '${user.username}' == from ? "am-comment-flip" : "";   //如果是自己则显示在右边,他人信息显示在左边
       var url="/static/img/"+user.roleid.rolename+".jpg";
        var html = "<li class=\"am-comment "+isSef+" am-comment-primary\"><a href=\"#link-to-user-home\"><img width=\"48\" height=\"48\" class=\"am-comment-avatar\" alt=\"\" src="+url+"></a><div class=\"am-comment-main\">\n" +
            "<header class=\"am-comment-hd\"><div class=\"am-comment-meta\">   <a class=\"am-comment-author\" href=\"#link-to-user\">"+from+"</a>  </div></header><div class=\"am-comment-bd\"> <p>"+message+"</p></div></div></li>";
        $("#chat").append(html);
        $("#message").val("");
        $("#chat-view").scrollTop(chat[0].scrollHeight);
    }

    function showOnline(list){
        $("#list").html("");    //清空在线列表
        $.each(list, function(index, item){
            var li = "<li>"+item+" <button type=\"button\" class=\"am-btn am-btn-xs am-btn-primary am-round\" ></button></li>";
            $("#list").append(li);
        });
        $("#onlinenum").text($("#list li").length);     //获取在线人数
    }

   $("#clearchat").click(function(){
        $("#chat").html("");
    })
    //定时调用
    function doajax(){
        $.ajax({
            url: '/notice/query10.do',
            type: 'post',
            async: true,
            dataType: 'json',
            success: function (result) {
                $("#xiTongGongGao").val("最新公告:"+result[0].notice_title);}
    })
    }
    setInterval(function (){
        doajax();
    },10000);
</script>
</body>
</html>
